<template>
	<view class="title" style="display: flex;justify-content: center;height:30px">
		<view class="over" style="width: 50%; text-align: center;color: blue;border-bottom: 1px solid blue;line-height: 30px;">
			已完成
		</view>
			<view class="never" style="width: 50%;text-align: center;line-height: 30px;">
				未完成
			</view>
			
			</view>
  <view class="container">

    <view class="activity-card" v-for="(tab,index) in tabs" :key=index @click="clicka(tab.stats)" > 
      <view class="activity-status">{{tab.stats === 1 ?"进行中": "已完成"}}</view>
      <view class="activity-name">{{tab.name}}</view>
      <view class="activity-date">计划开始日期：{{tab.daastart}}</view>
      <view class="activity-date">计划结束日期：{{tab.dataend}}</view>
      <view class="activity-location">{{tab.location}}</view>
      <view class="activity-leader">{{tab.loader}}</view>
      <view class="activity-updated">{{tab.updated}}</view>
    </view>
  </view>
</template>
<script>
export default{
	data() {
		return {
			tabs: [
				{
					stats: "1",
					name:"活动名称",
					type:"招宣活动",
					datastart: "2023/03/29",
					dataend:"2023/03/29",
					location:"湖北省武汉市洪山区",
					leader:"活动牵头宣传组：宣传组名称1",
					updated:"李明于2023/03/29更新了活动照片"
				},
				{
					stats: "2",
					name:"武汉第一中学",
					type:"母校行活动",
					datastart: "计划开始日期：2023/03/29",
					dataend:"计划结束日期：2023/03/29",
					location:"行政区域地址：湖北省武汉市洪山区",
					leader:"行政区域地址：湖北省武汉市洪山区",
					updated:"李明于2023/03/29更新了活动照片"
				}
			]
		}
	},
	methods: {
		clicka(p) {
			if(p === 1) {
				uni.navigateTo({
					url:"/pages/video/approval/muxiao"
				})
			} else {
				uni.navigateTo({
					url:"/pages/video/approval/shenqing"
				})
			}
		},
	}
}
</script>
<style>
.title {
	display: flex;
	justify-content: center;
}
.over, .never {
	width: 50%;
}
page{
	background-color: #f5f5f5;
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.activity-card {
  background-color: #fff;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 20px;
  width: 100%;
}

.activity-status {
  font-size: 16px;
  font-weight: bold;
  color: #007aff;
  margin-bottom: 5px;
}

.activity-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.activity-type {
  font-size: 16px;
  margin-bottom: 5px;
}

.activity-date,
.activity-location,
.activity-leader,
.activity-updated {
  font-size: 14px;
  margin-bottom: 5px;
}
</style>